<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="container">

    <p>{{ counter }}</p>

    <button @click="increment">increment</button>
</div>

<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/vuex@4"></script>
<script type="text/javascript">

    // import {createApp} from 'vue'
    // import {createStore} from 'vuex'

    const store = Vuex.createStore({
        state(){
            return {
                counter: 1
            }
        },
        mutations:{
            increment(state){
                state.counter++
            }
        }
    })

    const demoApp = {
        data() {
            return {
                counter: this.$store.state.counter
            }
        },
        mounted() {

        },
        methods: {
            increment() {
                this.$store.commit('increment')
                this.counter = this.$store.state.counter
            }
        }

    }

    Vue.createApp(demoApp)
        .use(store)
        .mount('#container')
</script>

</body>
</html>
